import React from 'react'
import { Card, Row, Col } from 'antd';
import LindeChart from './LineChart';
import { DatePicker, Radio } from 'antd';
import moment from 'moment';
import { getTimeDistance } from '../utils/AcquisitionTime'
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';

const { RangePicker } = DatePicker;
type RangePickerValue = RangePickerProps<moment.Moment>['value'];

const HomeBottom = () => {

  const [cardTitle, setCardTitle] = React.useState('本年');
  const [rangePickerValue, setRangePickerValue] = React.useState<RangePickerValue>(
    getTimeDistance('year'),
  );

  const changeTime = (e) => {
    console.log(e.target.value);
    if (e.target.value === 'week') {
      setCardTitle('本周')
    }
    if (e.target.value === 'month') {
      setCardTitle('本月')
    }
    if (e.target.value === 'year') {
      setCardTitle('本年')
    }
    setRangePickerValue(getTimeDistance(e.target.value))
  }

  return (
    <Card
      title={
        <div>
          {cardTitle}汇率变化
        </div>
      }
    >
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Row gutter={[16, 16]}>
            <Col span={6}>当前汇率：1.000321</Col>
            <Col span={6}>货币对</Col>
            <Col span={12}>
              <Radio.Group
                defaultValue="year"
                buttonStyle="solid"
                onChange={changeTime}
              >
                <Radio.Button value="week">本周</Radio.Button>
                <Radio.Button value="month">本月</Radio.Button>
                <Radio.Button value="year">本年</Radio.Button>
              </Radio.Group>
              <RangePicker
                value={rangePickerValue}
              />
            </Col>
          </Row>
        </Col>
        <Col span={24}>
          <LindeChart cardTitle={cardTitle} />
        </Col>
      </Row>
    </Card>
  )
}

export default HomeBottom